/* eslint-disable array-callback-return */

import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import { Button, Modal, Form, Select, message, Input } from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, layoutModel } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import ImageWithToken from '@/plugins/ImageWithToken'
import ImageWithTokenlist from '@/plugins/ImageWithTokenlist'
import { Unite } from '@/utils/Unite'
import { reduce, size, times } from 'lodash';
import ImageWithTokenBig from '@/plugins/ImageWithTokenBig'
import VeWithToken from '@/plugins/veWithToken'
import PdfWithToken from '@/plugins/pdfWithToken'
import Item from 'antd/lib/list/Item'
const confirm = Modal.confirm

var intervalId = null
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    dataSourceclassroom: [],
    dataSource: [],
    from: {
      classroom_id: '',
    },
    classroom_Id: '',
    que_type: '',
    course_iditem: {
      course_content: "",
      course_desc: "",
      course_label: "",
      course_logo: "",
      course_name: "",
      course_type: 1,
      content_type: 1,
      id: 1
    },
    visiblecourse: false,
    currentTimerId: 2,
    course_iditemid: ''
  }
  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 100)
  }
  componentWillUnmount(nextProps) {
    clearInterval(intervalId);
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log(nextProps, nextState)
  // }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  // console.log('cancel2222')
  
  getDataclassroom = (current, pageSize, classroom_Id) => {
    intervalId = setInterval(this.myFunction, 60000)
    let data = {
      page_index: current,
      page_size: 8,
      classroom_id: classroom_Id,
    }
    this.setState({ course_iditemid: classroom_Id })
    post('dashboard/student/course/list', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        this.setState({ dataSource: res.data, total: res.size })
      }
    })
  }
  getData = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: pageSize,
    }
    post('dashboard/student/classroom/list', data).then((res) => {
      if (res.code == '-1') {
        message.error(res.info)
      } else {
        if (res.data.length > 0) {
          this.setState({
            classroom_Id: res.data[0].id,
          })
          this.getDataclassroom(1, 10, res.data[0].id)
        }
        this.setState({ dataSourceclassroom: res.data, })
      }
    })
  }
  handsearch = (values) => {
    this.setState({ from: values })
    this.getData(1, 10)
  }
  handleReset = () => {
    this.setState({ from: {} })
    this.formRef.current.resetFields()
    let that = this
    setTimeout(function () {
      that.getData(1, 10)
    }, 500) //延时10秒
  }
  question_type = (item) => {
    this.setState({
      classroom_Id: item.id,
    })
    this.getDataclassroom(1, 10, item.id)
  }
  myFunction = () => {
    console.log("Function executed!");
    post('dashboard/student/classroom/heartbeat', {
      classroom_id: this.state.course_iditemid,
    }).then((res) => {
      if (res.code == '-1') {
        // message.error(res.info)
      } else {

      }
    })
  }
  // 取消定时任务
  KTY = (item) => {
    if (item.content_type === 3) {
      window.open(item.course_content);
    } else if (item.course_type === 1) {
      this.props.history.push('/programming/0')
    } else {
      this.setState({ course_iditem: item, visiblecourse: true })
    }

  }
  handleOkcoy = () => {
    if (this.ChildPage && this.state.course_iditem.content_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visiblecourse: false, course_iditem: {
        "course_content": "", // 课程内容
        content_type: 1,
        "course_desc": "",
        "course_label": "",
        "course_logo": "",
        "course_name": "", // 课程名称
        "course_type": 1,
        "id": 1,
        "index": 1
      }
    })
  }
  handleCancelcoy = () => {
    if (this.ChildPage && this.state.course_iditem.content_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visiblecourse: false, course_iditem: {
        "course_content": "", // 课程内容
        content_type: 1,
        "course_desc": "",
        "course_label": "",
        "course_logo": "",
        "course_name": "", // 课程名称
        "course_type": 1,
        "id": 1,
        "index": 1
      }
    })
  }
  pale = (index) => {
    if (index == 1) {
      if (this.state.current == 1) {
      } else {
        this.setState({ current: this.state.current - 1 })
        this.getDataclassroom(this.state.current - 1, 8, this.state.classroom_Id)

      }
    } else {
      if (Math.ceil(this.state.total / 8) > this.state.current) {
        this.setState({ current: this.state.current + 1 })
        this.getDataclassroom(this.state.current + 1, 8, this.state.classroom_Id)
      }
    }
  }
  // 随机数
  getRandomInt(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
  }
  render() {
    const { i18n } = this.props
    const { dataSource, dataSourceclassroom, classroom_Id, course_iditem, visiblecourse } = this.state


    return (
      <div style={{ height: '88%' }}>
        <div style={{ position: 'relative', height: '100%' }}>
          <div
            style={{
              display: 'flex',
              width: '94%',
              justifyContent: 'center',
              zIndex: 5,
              position: 'relative',
              marginBottom: '70px',
              left: '3%',
              height: '100%',
            }}
          >
            <div style={{ width: '100%', height: '100%' }}>
              <img
                style={{
                  width: '100%',
                  height: '100%',
                }}
                alt=""
                src={require('../../imges/NL1.png')}
              />
            </div>
            <div style={{ width: '100%' }}>
              <img
                style={{
                  width: '100%',
                  height: '100%',
                }}
                alt=""
                src={require('../../imges/NL2.png')}
              />
            </div>
          </div>
          <div className="TopBuy">
            <img
              style={{
                width: '424px',
                height: '80px',
              }}
              alt=""
              src={require('../../imges/mc.png')}
            />
            <div className="zit1">我的课堂</div>
          </div>
          <div
            style={{
              position: 'absolute',
              top: '50px',
              width: '100%',
              zIndex: 5,
              height: '80%'
            }}
          >
            <div
              style={{
                display: 'flex',
                flexWrap: 'wrap',
                marginTop: '40px',
                width: '80%',
                marginLeft: '6%',
              }}
            >
              {dataSourceclassroom.map((item) => {
                return (
                  <Button
                    type={classroom_Id == item.id ? 'primary' : ''}
                    className={
                      classroom_Id == item.id ? 'from_bu22' : 'from_bu21'
                    }
                    onClick={() => this.question_type(item)}
                  >
                    {item.classroom_name}
                  </Button>
                )
              })}
            </div>

            <div className="Nl14">
              {dataSource.map((item) => {
                return (
                  <div className="buhy22" onClick={() => this.KTY(item)}>
                    <div style={{ margin: '30px auto 0px' }}>
                      {
                        item.course_type == 1 ? <img
                          style={{
                            width: '256px',
                            height: '172px',
                          }}
                          alt=""
                          src={require('../../imges/' +
                            this.getRandomInt(1, 50) +
                            '.png')}
                        /> : <ImageWithToken
                          style={{
                            width: '256px',
                            height: '172px',
                          }}
                          key={item.id}
                          src={item.course_logo}
                        />
                      }
                    </div>
                    {
                      item.course_type == 1 ? <div className="zit">编程工具</div> : <div className="zit">{item.course_name}</div>
                    }

                  </div>
                )
              })}
            </div>
            <div
              style={{
                position: 'absolute',
                right: '20px',
                top: '50%',
                cursor: 'pointer',
                zIndex: 8,
              }}
            >
              <img
                onClick={() => this.pale(2)}
                style={{
                  width: '60px',
                  height: '60px',
                  cursor: 'pointer',
                  zIndex: 8,
                }}
                alt=""
                src={require('../../imges/le.png')}
              />
            </div>
            <div
              style={{
                position: 'absolute',
                left: '20px',
                top: '50%',
                cursor: 'pointer',
                zIndex: 8,
              }}
            >
              <img
                onClick={() => this.pale(1)}
                style={{
                  width: '60',
                  height: '60px',
                  cursor: 'pointer',
                  zIndex: 8,
                }}
                alt=""
                src={require('../../imges/re.png')}
              />
            </div>
          </div>
          <div className="dby">
            <div style={{ width: '100%' }}>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db11.png')}
              />
            </div>
            <div style={{ width: '100%' }}>
              <img
                style={{
                  width: '100%',
                }}
                alt=""
                src={require('../../imges/db12.png')}
              />
            </div>
          </div>
        </div>
        <div>
          <div
            style={{
              display: 'flex',
              position: 'absolute',
              bottom: '0px',
              width: '100%',
              zIndex: 8,
            }}
          >
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db2.png')}
              />
            </div>
            <div style={{ width: '60%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db3.png')}
              />
            </div>
            <div style={{ width: '20%' }}>
              <img
                style={{
                  width: '100%',
                  height: '65px',
                }}
                alt=""
                src={require('../../imges/db1.png')}
              />
            </div>
          </div>
        </div>
        <Modal
          width={course_iditem.content_type == 1 ? '40%' : course_iditem.content_type == 2 ? '80%' : '40%'}
          title="课程内容" visible={this.state.visiblecourse} onOk={this.handleOkcoy} onCancel={this.handleCancelcoy}>
          {/* 视频 */}
          {
            course_iditem.content_type == 1 ? <div>
              <VeWithToken onRef={c => this.ChildPage = c} key={course_iditem.id} src={course_iditem.course_content} />
            </div> : ''
          }
          {/* pdf文档 */}
          {
            course_iditem.content_type == 2 ? <div>
              <PdfWithToken key={course_iditem.id} src={course_iditem.course_content} />
            </div> : ''
          }
          {/*  */}
          {
            course_iditem.content_type == 3 ? <div></div> : ''
          }
          {/* 图片 */}
          {
            course_iditem.content_type == 4 ? <div>
              <ImageWithTokenBig key={course_iditem.id} src={course_iditem.course_content} />
            </div> : ''
          }
        </Modal>
      </div>
    )
  }
}
Command.propTypes = {}
export default Command
